<template>
  <div class="top-menu">
    <el-menu :default-active="topMenuIndex+''" mode="horizontal">
      <template v-for="(item,index) in menu" :key="index">
        <el-menu-item :index="index+''" @click="openMenu(index)">
          <template #title>
            <i :class="item.icon"></i>
            <span>{{item.label}}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    const store = useStore()
    //查询菜单
    const menu = computed(() => store.getters.menu)

    //顶部导航索引
    const topMenuIndex = computed(() => store.getters.topMenuIndex)

    const openMenu = (index) => {
      store.commit('SET_TOP_MENU_INDEX', index)
    }
    return {
      menu,
      topMenuIndex,
      openMenu,
    }
  },
})
</script>
